<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-section">
				<view class="left">
					<text :class="info.icon"></text>
				</view>
				<view class="right">
					<view style="color:#333;font-size: 16px;font-weight: bold;">{{info.name}}详情</view>
					<view class="mt-20" style="font-size:12px;color:#666;">{{info.description}}</view>
				</view>
			</view>
			<view v-if="info.stats" class="section py-20">
				<view class="grid row-2">
					<view v-for="item in info.stats">
						<view style="font-size: 14px;color:#999;"> {{item.label}}</view>
						<view class="mt-10" style="color:#333;font-size: 16px;font-weight: bold;">{{item.value}}</view>
					</view>
				</view>
			</view>
			
			<view v-if="info.responsibilities" class="section py-20">
				<view class="section-title">核心职责</view>
				<view class="px-30">
					<view  style="font-size: 14px;display: flex;align-items: center;margin:15rpx 0;" v-for="item in info.responsibilities" >
						<text class="li-icon ri-check-fill mr-20" ></text>{{item}}
					</view>
				</view>
			</view>
			
			<view v-if="info.events" class="section py-20">
				<view class="section-title">近期工作安排</view>
				<view class="px-30">
					<view style="display: flex;align-items: center;margin:15rpx 0;" v-for="item in info.events">
						<view style="flex-grow: 1;" class="pr-10">
							<view style="font-size: 15px;color:#333;">{{item.title}}</view>
							<view style="font-size: 13px;color:#999;margin-top: 10px;">{{item.date}}</view>
						</view>
						<view style="flex-shrink: 0;">
							<text style="padding:2px 8px;border-radius: 50em;font-size:12px;" :style="{backgroundColor:'#F3F4F6',color:'#727A85'}">{{item.status}}</text>
						</view>
					</view>
				</view>
			</view>
			<view style="height:30rpx;"></view>
		</view>
	</view>
</template>

<script>
	import {
		getGovernanceDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				pageLoading: false,
				info: {
					"level": "一级长",
					"id": "township",
					"name": "镇级",
					"managers": "镇长、党委书记",
					"color": "blue",
					"icon": "government-line",
					"gradient": "from-blue-500 to-primary-500",
					"shortDescription": "全镇统筹",
					"description": "镇级是治理体系的顶层，由镇长和镇党委书记负责，统筹管理全镇基层治理工作。",
					"stats": [{
							"label": "覆盖范围",
							"value": "全镇"
						},
						{
							"label": "主要负责人",
							"value": "镇长、党委书记"
						},
						{
							"label": "辖区面积",
							"value": "187.5平方公里"
						},
						{
							"label": "总人口",
							"value": "56,783人"
						}
					],
					"responsibilities": [
						"镇域内治理的总体战略规划",
						"政策制定与资源调配",
						"跨部门协调工作",
						"重大问题决策与处理"
					],
					"events": [{
							"title": "全镇治理工作会议",
							"date": "2025-03-15",
							"status": "已完成"
						},
						{
							"title": "安全生产专项检查",
							"date": "2025-03-18",
							"status": "进行中"
						},
						{
							"title": "跨村矛盾协调会",
							"date": "2025-03-22",
							"status": "计划中"
						},
						{
							"title": "村社党委书记培训",
							"date": "2025-03-25",
							"status": "计划中"
						},
						{
							"title": "治安综合整治行动",
							"date": "2025-03-30",
							"status": "计划中"
						}
					],
					"units": null,
					"gridComparison": null,
					"topGrids": null,
					"unitTypes": null,
					"unitTypesPerformance": null,
					"performanceScore": 93,
					"responseTime": 6.8,
					"responseTimeChange": -0.3
				},
				options: {},
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getGovernanceDetail(this.options.level).then(res => {
					this.info = res.layout;
					typeof cb == 'function' && cb();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}
	.li-icon{
		width:20px;
		height:20px;
		color:#4076ED;
		background-color: #DBEAFE;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}
	.first-section{
		display: flex;
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		padding: 40rpx 30rpx;
		background-color: white;
		border-radius: 10px;
		background-color: #E5F0FE;
		color: white;
		border:1rpx solid #C4DDFE;
		.left{
			width:50px;
			height:50px;
			color:#4076ED;
			background-color: #DBEAFE;
			border-radius: 50px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		.right{
			padding-left: 30rpx;
		}
	}
	.section {
		width: calc(100% - 60rpx);
		margin: 30rpx auto 0;
		background-color: white;
		border-radius: 10px;

		.section-title {
			font-size: 17px;
			font-weight: bold;
			padding: 20px;
		}

		.badge {
			display: inline-block;
			font-size: 12px;
			background-color: lightcoral;
			color: white;
			padding: 2px 8px;
			border-radius: 5px;
		}
	}

	.tabs {
		display: flex;
		flex-wrap: wrap;

		.tabs-item {
			flex: 1;
			text-align: center;
			font-size: 17px;
			font-weight: bold;
			padding: 10px 20px;
			border-bottom: 2px solid #eee;

			&.on {
				border-color: lightcoral;
			}
		}
	}

	.grid {
		display: flex;
		flex-wrap: wrap;

		&>view {
			width: calc(50% - 20px);
			margin: 10px;
			text-align: center;
		}

		&.row-2 {
			&>view {
				width: calc(50% - 20px);
			}
		}
	}

	.sub-title {
		display: flex;
		align-items: center;
		padding: 15px;

		.icon {
			width: 40px;
			height: 40px;
			border-radius: 40px;
			background-color: #eee;
			text-align: center;
			line-height: 40px;
		}

		.center {
			padding-left: 10px;
			flex-grow: 1;
		}

		.right {
			font-size: 12px;
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightcyan;
			color: royalblue;
			border: 1rpx solid #eee;

		}
	}

	.village-list {
		margin: -5px;
	}

	.village-item {
		color: #666;
		margin: 5px;
		font-size: 12px;
		display: inline-block;
		padding: 2px 8px;
		border-radius: 5px;
		background-color: white;
		border: 1rpx solid #eee
	}

	.levels-item {
		padding: 10px 20px;
		display: flex;
		align-items: center;

		.left {
			flex-shrink: 0;
			background-color: lightsalmon;
			color: white;
			text-align: center;
			line-height: 40px;
			width: 40px;
			height: 40px;
		}

		.right {
			padding-left: 15px;
			flex-grow: 1;
		}
	}


	.tags {
		margin-left: -5px;
		margin-right: -5px;

		&>view {
			display: inline-block;
			padding: 4px 10px;
			background-color: rgba(255, 255, 255, 0.3);
			border-radius: 50em;
			color: white;
			font-size: 12px;
			margin: 5px;

			&>text {
				margin-right: 5px;
			}
		}

	}
</style>